<template>
  <div class="app-layout">
    <AppHeader />
    <div class="content-container">
      <LeftColumn />
      <MainContent />
      <RightColumn />
    </div>
    <AppFooter />
  </div>
</template>

<script setup>
import AppHeader from './AppHeader.vue';
import LeftColumn from './LeftColumn.vue';
import MainContent from './MainContent.vue';
import RightColumn from './RightColumn.vue';
import AppFooter from './AppFooter.vue';
</script>

<style scoped>
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 50vh;
}
.content-container {
  display: flex;
  flex: 1;
}
</style>